<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奥运五环</title>
    <style>
    div{
        width:800px;
        height:600px;
        border:1px solid black;
        text-align: center;
        line-height: 400px;
    }
    .div1 {
        width: 0px;
        height: 0px;
        padding: 70px;
        background-color: transparent;
        border-top: 10px solid blue;
        border-right: 10px solid blue;
        border-bottom: 10px solid blue;
        border-left: 10px solid blue;
        border-radius: 50%;
        position: relative;
        left: 20px;
        top: 80px;
    }
    .div2 {
        width: 0px;
        height: 0px;
        padding: 70px;
        background-color: transparent;
        border-top: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        border-left: 10px solid black;
        border-radius: 50%;
        position: relative;
        left: 45px;
        top: 80px;
    }
    .div3 {
        width: 0px;
        height: 0px;
        padding: 70px;
        background-color: transparent;
        border-top: 10px solid red;
        border-right: 10px solid red;
        border-bottom: 10px solid red;
        border-left: 10px solid red;
        border-radius: 50%;
        position: relative;
        left: 65px;
        top: 80px;
    }
    .div4 {
        width: 0px;
        height: 0px;
        padding: 70px;
        background-color: transparent;
        border-top: 10px solid yellow;
        border-right: 10px solid yellow;
        border-bottom: 10px solid yellow;
        border-left: 10px solid yellow;
        border-radius: 50%;
        position: relative;
        left: -470px;
        top: 165px;
    }
    .div5 {
        width: 0px;
        height: 0px;
        padding: 70px;
        background-color: transparent;
        border-top: 10px solid green;
        border-right: 10px solid green;
        border-bottom: 10px solid green;
        border-left: 10px solid green;
        border-radius: 50%;
        position: relative;
        left: 45px;
        top: -235px;
    }
    </style>
</head>
<body>
    <div>
        <div1 class="div1">欧洲</div1>
        <div2 class="div2">非洲</div2>
        <div3 class="div3">美洲</div3>
        <div4 class="div4">大洋洲</div4>
        <div5 class="div5">亚洲</div5>
    </div>
</body>
</html>